<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更多书籍</title>
    <link rel="stylesheet" href="../../style/more/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/more/indexStyle.css">
    <link rel="stylesheet" href="../../style/more/more.css">
    <link rel="shortcut icon" href="./../../favicon.ico">
    <script type="text/javascript" src="../../plugins/jQuery/jquery-3.6.0.js"></script>
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script type="text/javascript" src="../../plugins/axios/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <script src="../../plugins/layer-master/dist/layer.js"></script>
</head>

<body>
<div id="app">
    <nav class="public-header">
        <a href="../../index.html">网站首页</a>
        <a href="">我的订单</a>
        <a href="../../pages/cart/shoppingCart.html">我的购物车</a>
        <a href="">讨论区</a>
    </nav>
    <div class="container">
        <!-- 搜索框区域 -->
        <div class="row ssq">
            <div>
                <div class="col-md-3" style="font-size: 38px;text-align: center;">
                        <span style="font-family:'华文行楷'">{{bookname}}
                            <span style="font-size:15px">共{{booklist.length}}条记录</span></span>
                </div>
                <div class="col-md-5 col-md-offset-2">
                    <div class="input-group input-group-lg">
                        <input type="text" class="form-control" placeholder="生命唯愿爱与自由"
                               aria-describedby="basic-addon2" v-model="searchtext">
                        <span class="input-group-btn" id="basic-addon2">
                                <button class="btn btn-default" id="query" @click="loadSearchBookData">搜索</button>
                            </span>
                    </div>
                </div>
            </div>
            <!-- /.col-lg-6 -->
        </div>

        <div class="container">
            <ul class="media-list">
                <li class="media" v-for="(item,index) in booklist">
                    <div class="media-left">
                        <a href="#" class="media-left-a">
                            <img class="media-object more_media_img" :src=`http:${item.imageName}` alt="...">
                        </a>
                    </div>


                    <div class="media-body" style="overflow:visible">
                        <h4 class="media-heading"><span class="name">{{item.name}}</span></h4>
                        <span class="description">{{item.description}}</span>

                        <h4 class="address"><span class="author">{{item.author}}</span>&nbsp;&nbsp; <span
                                style="color:gray">/</span><span style="font-size:16px"
                                                                 class="publisher">&nbsp;&nbsp;{{item.publisher}}</span>
                        </h4>

                        <p id="jg">￥{{item.price}}</p>
                        <button @click="addCart(item)"
                                :class="[ !item.show == show ? isactive ==index?'btn class2': 'btn gw-btn':'btn class2'] ">
                            <i
                                    class="fa fa-cart-plus"></i>&nbsp;&nbsp;{{item.show ? "此书已在购物车中" : "加入购物车"}}
                        </button>
                        <!-- <button  @click="addCart(index)"   v-show="show" class="btn class2" ><i class="fa fa-cart-plus"></i>&nbsp;&nbsp;该书已在购物车中</button> -->

                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="extra">
        <div class="wrapper">
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜儿</p>
            </div>
        </div>
    </div>
</div>
<script>
    // 取消vue的开发模式
    Vue.config.productionTip = false;

    var vm = new Vue({
        el: '#app',
        data: {
            searchtext: '', // 搜索框
            bookname: '', //标题名字
            booklist: [], //图书信息列表
            categoryId: '', // 分类id
            url: '/category/', //网址，
            gouwulist: [], //用户购物车信息
            show: true, //购物车颜色的显示
            cartText: "加入购物车", //购车图标内文字显示
            isactive: -1,
            searchShow: false, //通过搜索来显示的内容
        },
        methods: {
            // 获取到更多该分类下的图书
            loadCategoryMoreData(cid) {
                axios({
                    url: 'http://localhost:9000/book/find_more_category/' + cid
                }).then(resp => {
                    this.booklist = resp.data.data
                })
            },
            // 新鲜好书
            loadFreshMoreBookData() {
                axios({
                    url: 'http://localhost:9000/book/find_fresh_more'
                }).then(resp => {
                    this.booklist = resp.data.data
                })
            },
            // 低价专区
            loadLowerMoreBookData() {
                axios({
                    url: 'http://localhost:9000/book/find_lower_more'
                }).then(resp => {
                    this.booklist = resp.data.data
                })
            },
            // 根据条件全站搜索｜分类搜索
            loadSearchBookData() {
                let type = sessionStorage.getItem('type')
                if (type - 0 === 1) {
                    axios({
                        url: 'http://localhost:9000/book/find_search_category/' + this.searchtext + '/' + this.categoryId
                    }).then(resp => {
                        // this.bookname = this.searchtext
                        this.booklist = resp.data.data
                    })
                } else {
                    axios({
                        url: 'http://localhost:9000/book/find_search/' + this.searchtext
                    }).then(resp => {
                        this.bookname = this.searchtext
                        this.booklist = resp.data.data
                    })
                }

            },
            // 加入购物车
            addCart(row) {
                axios({
                    url: 'http://localhost:9000/shopping/add/' + row.id,
                    method: 'post',
                    headers: {
                        token: localStorage.getItem('bookstore_front_token')
                    }
                }).then(resp => {
                    if (resp.data.success) {
                        this.$message({
                            type: 'success',
                            message: row.name + '加入购物车成功'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: resp.data.error
                        });
                    }
                }).catch(e => {

                })
            }
        },
        created() {
            let type = sessionStorage.getItem('type')
            this.bookname = sessionStorage.getItem('title_name') // 标题的名称
            if (type - 0 === 1) {
                this.categoryId = sessionStorage.getItem('category_id')
                this.loadCategoryMoreData(this.categoryId)
            } else if (type - 0 === 2) {
                this.loadFreshMoreBookData()
            } else if (type - 0 === 3) {
                this.loadLowerMoreBookData()
            } else if (type * 1 === 4) {
                this.searchtext = this.bookname
                this.loadSearchBookData()
            }
        },
        mounted() {
            // 搜索框的文字变红
            setTimeout(() => {
                this.$nextTick(function () {
                    var inputvalue = decodeURI(this.categoryId)
                    for (let i = 0; i < this.booklist.length; i++) {
                        if (this.booklist[i].author.indexOf(inputvalue) >= 0) {
                            var values = this.booklist[i].author.split(inputvalue).join(
                                '<span style="color:red;">' + inputvalue + "</span>");
                            $(".author")[i].innerHTML = values;
                        }

                        if (this.booklist[i].description.indexOf(inputvalue) >= 0) {
                            var values = this.booklist[i].description.split(inputvalue).join(
                                '<span style="color:red;">' + inputvalue + "</span>");
                            $(".description")[i].innerHTML = values;
                        }

                        if (this.booklist[i].publisher.indexOf(inputvalue) >= 0) {
                            var values = this.booklist[i].publisher.split(inputvalue).join(
                                '<span style="color:red;">' + inputvalue + "</span>");
                            $(".publisher")[i].innerHTML = values;
                        }

                        if (this.booklist[i].name.indexOf(inputvalue) >= 0) {
                            var values = this.booklist[i].name.split(inputvalue).join(
                                '<span style="color:red;">' + inputvalue + "</span>");
                            $(".name")[i].innerHTML = values;
                        }
                    }
                })
            }, 200);
        },
    });
</script>
</body>

</html>